<template>
    <div>
        <div class="d-flex justify-content-between mb-2">
            <div class="flex-grow-1">
                <el-button type="info" size="small">刷新</el-button>
                <el-button type="primary" size="small">添加</el-button>
                <el-button type="primary" size="small">编辑</el-button>
                <el-button type="primary" size="small">删除</el-button>
            </div>
            <div class="d-flex">
                <el-input v-model="input4" placeholder="关键词..." size="small"></el-input>
                <el-button-group class="d-flex">
                    <el-button type="primary" size="small">搜索</el-button>
                    <el-button type="primary" size="small">高级搜索</el-button>
                </el-button-group>
            </div>
        </div>
        <el-table :data="data" border v-bind="_options" @selection-change="handleSelectionChange"
            @row-click="handleRowClick" @cell-click="handleCellClick" style="width: 100%">
            <el-table-column v-bind="item" show-overflow-tooltip v-for="(item, idx) of columns" :key="idx">
                <!-- 传有slotName时展示的插槽列 -->
                <template #default="scope">
                    <slot :name="item.slot" :row="scope.row" :$index="scope.$index" v-if="item.slot">
                        <template v-if="item.slot === 'operate'">
                            <el-button link size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑
                            </el-button>
                            <el-button link size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                        <template v-if="item.slot === 'status'">
                            <el-button>{{
                                    scope.row.status === 0 ? '禁用' : '启用'
                            }}</el-button>
                        </template>
                    </slot>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background v-model:currentPage="currentPage4" v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]" :small="true" :background="false"
            layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>
  
<script>
export default {
    props: {
        data: {
            type: Array,
            default() {
                return [];
            }
        },
        columns: {
            type: Array,
            default() {
                return [];
            }
        },
        options: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    emits: ['selection-change', 'row-click', 'cell-click', 'command', 'size-change', 'current-change', 'pagination-change'],
    watch: {
        data(newVal) {
            this.list = newVal;
        },
        column(newVal) {
            this.columns = newVal;
        }
    },
    data() {
        return {
            list: this.data,
            input4: '',
            currentPage4: 4,
            pageSize4: 100,
            _paginationConfig: {
                total: 0,
                currentPage: 1,
                pageSize: 10,
                pageSizes: [10, 20, 30, 40, 50, 100],
                layout: 'total, sizes, prev, pager, next, jumper'
            }
        }
    },
    methods: {
        // 多选事件
        handleSelectionChange(val) {
            this.$emit('selection-change', val)
        },
        // 当某一行被点击时会触发该事件
        handleRowClick(row, column, event) {
            this.$emit('row-click', row, column, event)
        },
        // 当某个单元格被点击时会触发该事件
        handleCellClick(row, column, cell, event) {
            this.$emit('cell-click', row, column, cell, event)
        },
        handleSizeChange(pageSize) {
            console.log(`${pageSize} items per page`)
            this.$emit('size-change', pageSize)
            this.$emit('pagination-change', 1, pageSize)
        },
        handleCurrentChange(currentPage) {
            console.log(`current page: ${currentPage}`)
            this.$emit('current-change', currentPage)
            this.$emit('pagination-change', currentPage, _paginationConfig.value.pageSize)
        },
        handleEdit(index, row) {
            console.log(index, row)
        },
        handleDelete(index, row) {
            console.log(index, row)
        }
    }
}
</script>
  